<template>
  <div class="home">
    <div class="header">
      <div class="avatar-wrapper" @click="doLogout" v-if="isLogin">
        <img :src="avatar" class="user-avatar" />
        退出登录
      </div>
      <div class="doLogin" @click="doLogin" v-else>
        <div class="img-box">
          <img src="@/assets/home/icon_login.png" class="user-avatar" />
        </div>
        登录
      </div>
    </div>
    <div class="title">
      <span class="text">{{sideTitle}}</span>
    </div>
    <div class="entryList">
      <div
        class="entryItem"
        :class="item.platformSource"
        v-for="item in entryList"
        :key="item.platformSource"
        @click="clickItem(item)"
      >
        {{ item.platformName }}
        <img class="itme-icon" :src="getIconUrl(item.platformSource)"/>
      </div>
      <div class="emptyItem" v-for="(item, index) in needEmptyNum" :key="index"></div>
    </div>
  </div>
</template>

<script>
import { listPlatformNoLogin } from "@/api/system/platform";
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import { getInfo } from '@/api/login'
export default {

  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 99,
      },
      loading: false,
      entryList: [],
      hasPlatformList: []
    };
  },
  computed: {
    ...mapGetters(["avatar", "browsHistory"]),
    isLogin() {
      return getToken();
    },
    sideTitle() {
       return process.env.VUE_APP_TITLE
     // return "天保跨境场所" + this.platformName;
    },
    // 每一行排列4个，计算需要填充的空位个数
    needEmptyNum() {
      return 4 - (this.entryList.length % 4);
    }
  },
  created() {},
  mounted() {
    this.getList();
    if(this.isLogin) {
      this.getUserInfo();
      this.$store.commit('SET_ROLES', [])
    }

  },
  methods: {
    getUserInfo() {
      getInfo().then(res => {
        if(!this.avatar) {
          const avatar = res.user.avatar ? process.env.VUE_APP_BASE_API + res.user.avatar : require("@/assets/images/profile.jpg");
          this.$store.commit('SET_AVATAR', avatar);
        }
        if(res.user.platforms) {
          this.hasPlatformList = res.user.platforms;
        }
      })
    },
    /** 查询系统平台管理列表 */
    getList() {
      this.loading = true;
      listPlatformNoLogin().then((response) => {
        this.entryList = response.data;
        this.loading = false;
      });
    },
    getIconUrl(platformSource) {
      let url = ""
      try {
        url = require('@/assets/home/' + platformSource + '.png');
      } catch {
        url = require('@/assets/home/SYSTEM.png');
      }
      return url;
    },
    clickItem(item) {
      // 判断是否登录
      if (this.isLogin) {
        // 判断是否有访问权限
        if(this.hasPlatformList.indexOf(item.platformSource) != -1) {
          this.$store.commit("SET_PLATFORM_SOURCE", item.platformSource);
          this.$store.commit("SET_PLATFORM_NAME", item.platformName);
          if(item.platformUrl.indexOf('http') != -1) {
            window.location.href = item.platformUrl;
          } else {
            this.$router.replace(item.platformUrl);
          }
        } else {
          this.$message.warning("无访问权限！")
        }
      } else {
        this.$message.warning("请先登录！")
        this.$router.push({
          path: "/login",
        });
      }
    },
    doLogin() {
      this.$router.push("/login");
    },
    // 退出登录
    doLogout() {
      this.$store.dispatch("LogOut").then(() => {
        this.$router.go(0);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "fangyuan1";
  src: url("~@/assets/font/34pfD8e1A4X7.woff") format("woff");
}

.home {
  width: 100%;
  min-height: 100%;
  background-size: 100% 100%;
  background: #fff url("~@/assets/images/home_bg.png") no-repeat center;
  background-size: cover;
  .header {
    width: 100%;
    height: 75px;
    background: #164485;
    margin-bottom: 50px;
    padding-right: 250px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .avatar-wrapper {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      color: #fff;
      .user-avatar {
        cursor: pointer;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 5px;
      }
    }
    .doLogin {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      color: #fff;
      .img-box {
        width: 30px;
        height: 30px;
        border: 1px solid #e3e3e3;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
        img {
          width: 18px;
          height: 18px;
        }
      }
    }
  }
  .title {
    width: 100%;
    text-align: center;
    margin-bottom: 10vh;
    .text {
      font-size: 32px;
      color: #fff;
      position: relative;
    }
    .text::before {
      content: "";
      height: 1px;
      width: 370px;
      background: linear-gradient(
        243deg,
        #f7f8f8 0%,
        #e7eaee 51%,
        #26569a 100%
      );
      position: absolute;
      left: -400px;
      top: 16px;
    }
    .text::after {
      content: "";
      height: 1px;
      width: 370px;
      background: linear-gradient(243deg, #26569a 0%, #fff 51%, #fff 100%);
      position: absolute;
      right: -400px;
      top: 16px;
    }
  }
  .entryList {
    width: 1250px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    .emptyItem {
      width: 260px;
      height: 150px;
      margin: 25px;
    }
    .entryItem {
      width: 260px;
      height: 150px;
      margin: 25px;
      border-radius: 6px;
      background-image: linear-gradient(to right bottom, #1c509e, #659ff4);
      cursor: pointer;
      color: #fff;
      position: relative;
      font-family: fangyuan1;
      font-weight: 600;
      padding-top: 20px;
      padding-left: 20px;
      .itme-icon {
        width: 90px;
        height: auto;
        position: absolute;
        right: 10px;
        bottom: 5px;
        z-index: 9;
      }
    }
    .entryItem:nth-child(1) {
      background-image: linear-gradient(to left top, #8b99f0ed, #6a7effb3);
    }
    .entryItem:nth-child(2) {
      background-image: linear-gradient(to right top, #1996a5, #76b7bf);
    }
    .entryItem:nth-child(3) {
      background-image: linear-gradient(to left bottom, #f8987ded, #ff9340b3);
    }
    .entryItem:nth-child(4) {
      background-image: linear-gradient(to right bottom, #1c509e, #659ff4);
    }
    .entryItem:nth-child(5) {
      background-image: linear-gradient(to left top, #41bba8, #378478);
    }
    .entryItem:nth-child(6) {
      background-color: #4a72b0;
    }
    .entryItem:nth-child(7) {
      background-image: linear-gradient(to left bottom, #6267fc, #828afab3);
    }
    .entryItem:nth-child(8) {
      background-image: linear-gradient(to left top, #d3c398, #8a8579)
    }
    .entryItem:nth-child(9) {
      background-image: linear-gradient(to left top, #8d8194, #836c8f);
    }
    .entryItem:nth-child(10) {
      background-image: linear-gradient(to left top, #bd9ac1, #c086c2);
    }
    .entryItem:nth-child(11) {
      background-image: linear-gradient(to left top, #d7e07f, #9ea092);
    }
    .entryItem:nth-child(12) {
      background-image: linear-gradient(to right bottom, #9982f0, #a592d6);
    }
    .SYSTEM {
      .itme-icon {
        bottom: 10px;
      }
    }
  }
}
</style>
